<template>
  <div
    :ref="refName"
    :class="className"
    :style="{ height: height, width: width }"
    :optionData="optionData"
  ></div>
</template>

<script>
import * as echarts from 'echarts'

const animationDuration = 6000

export default {
  props: {
    refName: {
      type: String,
      default: 'ref'
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    optionData: {
      type: Object
    }
  },
  data() {
    return {
      lineData: null
    }
  },
  watch: {
    optionData(newVal) {
      this.lineData = newVal
      this.init()
    }
  },
  methods: {
    init() {
      let dataList = this.lineData.dataList
      let nameList = this.lineData.nameList
      let myChart = echarts.init(this.$refs[this.refName])

      let option;

      option = {
        xAxis: {
          type: 'category',
          data: nameList
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: dataList,
            type: 'bar'
          }
        ],
        grid: {
          left: '-2%',
          right: '0%',
          top: '15%',
          bottom: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        }
      };

      option && myChart.setOption(option);

      myChart.on('click', function (event) {
        // 该监听器正在监听一个`echarts 事件`。
        console.log('监听一个点击事件：', event)
      })
    }
  }
}
</script>
